<template>
<el-container v-wechat-title="content.chapterName || '查看章节'">
  <el-header>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <!-- 用引号会报错：[vite] Internal server error: Illegal '/' in tags. -->
      <el-breadcrumb-item :to="{ path: `/book/${$route.params.bookId}` }">{{ bookName }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ `${content.chapterName}` }}</el-breadcrumb-item>
    </el-breadcrumb>
  </el-header>
  <!-- <el-empty v-show="empty"></el-empty> -->
  <el-main>
    <div v-loading="loadingPara">
      <div>
        <p v-for="p in content.paragraphs">{{ p }}</p>
      </div>
      <div class="link">
        <el-backtop @click="backClick">
          <div class="backChap">上一章</div>
        </el-backtop>
        <div></div>
        <el-backtop @click="nextClick">
          <div class="nextChap">下一章</div>
        </el-backtop>
      </div>
    </div>
  </el-main>
</el-container>
</template>

<script>
import { ref, reactive, defineComponent, onMounted, onUpdated, watch } from "vue";
import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
import service from "@/utils/request";
import { useStore } from "vuex";
import { ElMessage } from "element-plus"

export default defineComponent({
  name: "BookMain",
  components: {
    
  },
  setup () {
    
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const bookName = ref()
    
    const content = reactive({
      paragraphs: '',
      chapterName: ''
    })
    
    const loadingPara = ref(true)
    
    const backClick = () => {
      if (parseInt(route.params.chapterNum) === 1) {
        ElMessage("已经在第一章了");
      } else {
        router.push(`/book/${route.params.bookId}/${parseInt(route.params.chapterNum)-1}`)
        loadingPara.value = true
      }
    }
    
    const nextClick = () => {
      router.push(`/book/${route.params.bookId}/${parseInt(route.params.chapterNum)+1}`)
      loadingPara.value = true
    }
    
    onMounted(() => {
      // 异步获取数据
      service.get("/book/" + route.params.bookId + "/" + route.params.chapterNum).then(res => {
        if(res.data.paragraphs.length == 0) {
          content.paragraphs = ["付费章节"]
        } else {
          content.paragraphs = res.data.paragraphs;
        }
        content.chapterName = res.data.chapterName;
        loadingPara.value = false
      })
      // 添加阅读记录
      store.commit("addReadRecord", { book: { id: route.params.bookId }, chapterNum: route.params.chapterNum});
      // 获取书名
      let records = store.getters.getReadRecord
      // console.log(">>",records.find(o => o.id === route.params.bookId))
      bookName.value = records.find(o => o.id === route.params.bookId).name
      
    })
    
    // 路由变化之前
    onBeforeRouteUpdate((to, from, next) => {
      // 添加阅读记录, 这里放在最前面是因为 ReadRecordNavBar 里也会对路由更新进行更新最新阅读章节，
      // 如果放在后边，会因为存入数据太慢，很容易导致 ReadRecordNavBar 里获取的数据不是最新的,
      store.commit("addReadRecord", { book: { id: to.params.bookId }, chapterNum: to.params.chapterNum});
      if ( to !== from) {
        // 获取要去的页面的数据
        service.get(to.fullPath).then(res => {
          content.paragraphs = res.data.paragraphs
          content.chapterName = res.data.chapterName
          loadingPara.value = false 
        })
        // 放行
        next()
      }
    })
    
    return {
      content,
      bookName,
      loadingPara,
      backClick,
      nextClick
    }
  }
})
</script>

<style scoped>
.el-header {
  height: 20px !important;
}
.el-main {
}
.link {
  position: fixed;
  bottom: 20px;
  right: 30px;
  cursor: pointer;
}
.el-backtop {
  background-color: inherit;
  box-shadow: none;
}
.el-backtop > div {
  font-size: 10px;
  position: relative;
}
.backChap {
  bottom: 30px;
}
.nextChap {
}
</style>